<template>
  <MainPage title="参数配置规则库">
    <el-container class="containerContent">
      <el-aside width="304px">
        <el-input v-model="filterText" placeholder="输入关键字进行过滤"></el-input>
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          highlight-current
          node-key="value"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-aside>
      <el-main>
        <div class="myTableWrap">
          <FormTable
            ref="formTable"
            v-loading="isLoading"
            class="myFormTable"
            :table-label="tableLabel"
            :table-data="tableData"
          >
            <template #ruleSetName="{ row }">{{ row.ruleSetName }}规则集</template>
            <template #operation="slotProps">
              <el-link
                type="primary"
                style="margin-left: 12px"
                :underline="false"
                @click="handleClick(slotProps.row)"
              >
                打开规则集
              </el-link>
            </template>
          </FormTable>
          <ruleSetDetail
            v-if="showRuleSetDetail"
            ref="ruleSetDetail"
            type="parameterConfigure"
            @close="handleClose"
          />
        </div>
      </el-main>
    </el-container>
  </MainPage>
</template>

<script>
import FormTable from '@/components/form-table/index.vue'
import ruleSetDetail from './components/ruleSetDetail.vue'
import { loadChipTree, loadRuleSetGrid, initParameterConfiguration } from '@/api/rule-management'
import defaultSettings from '@/settings'
import { generateUUID, postMessage, receivedMessage } from '@/utils/index'
export default {
  name: 'ParameterConfigureRuleLibrary',
  components: { ruleSetDetail, FormTable },
  data() {
    return {
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      tableData: [],
      isLoading: false,
      currentTreeData: {},
      showRuleSetDetail: false,
      initParameterConfigurationRequestId: generateUUID(),
      loadChipTreeRequestId: generateUUID(),
      loadRuleSetGridRequestId: generateUUID()
    }
  },
  computed: {
    tableLabel() {
      if (this.currentTreeData.type === 1) {
        return [
          {
            prop: 'ruleSetId',
            label: 'ID编码'
          },
          {
            prop: 'ruleSetName',
            label: '规则集名称',
            type: 'slot'
          },
          {
            prop: 'operation',
            type: 'slot',
            width: 200,
            label: '操作'
          }
        ]
      } else {
        return [
          {
            prop: 'ruleSetId',
            label: 'ID编码'
          },
          {
            prop: 'ruleSetName',
            label: '规则集名称',
            type: 'slot'
          },
          {
            prop: 'compatible',
            label: '适配范围'
          },
          {
            prop: 'operation',
            type: 'slot',
            width: 200,
            label: '操作'
          }
        ]
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {},
  mounted() {
    this.loadTreeData()
    receivedMessage(this.dataHandle)
  },

  methods: {
    dataHandle(result) {
      let self = this
      let e = defaultSettings.isWPF ? result : { data: JSON.parse(result) }
      if (e.data.webInfo.requestId === self.initParameterConfigurationRequestId) {
        let res = e.data.response
        if (res.success) {
          self.$nextTick(() => {
            self.$refs.ruleSetDetail.is('view', res.data)
          })
        } else {
          self.$message.error(res.message)
        }
      } else if (e.data.webInfo.requestId === self.loadChipTreeRequestId) {
        self.setChipTreeData(e.data.response)
      } else if (e.data.webInfo.requestId === self.loadRuleSetGridRequestId) {
        self.tableData = e.data.response.data
        self.isLoading = false
      }
    },
    loadTreeData() {
      if (defaultSettings.isWPF || defaultSettings.isCEF) {
        this.loadChipTreeRequestId = generateUUID()
        let message = {
          RequestUrl: process.env.VUE_APP_URL + '/chip/loadTree',
          RequestMethod: 'POST',
          Headers: {
            contentType: 'application/json'
          },
          QueryParameter: {},
          RequestBody: {},
          WebInfo: {
            requestId: this.loadChipTreeRequestId
          }
        }
        postMessage(message)
      } else {
        loadChipTree().then((res) => {
          this.setChipTreeData(res)
        })
      }
    },
    setChipTreeData(res) {
      this.treeData = res.data
      let data = this.treeData?.[0]?.children?.[0]?.children?.[0]
      this.handleNodeClick(data)
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(data?.value)
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      if (data && !data.children) {
        this.currentTreeData = data
        this.getTableData()
      }
    },
    getTableData() {
      if (this.currentTreeData.value) {
        this.isLoading = true
        if (defaultSettings.isWPF || defaultSettings.isCEF) {
          this.loadRuleSetGridRequestId = generateUUID()
          let message = {
            RequestUrl: process.env.VUE_APP_URL + '/ruleSet/loadGrid',
            RequestMethod: 'POST',
            Headers: {
              contentType: 'application/json'
            },
            QueryParameter: {},
            RequestBody: { ruleBaseType: 2, chipId: this.currentTreeData.value },
            WebInfo: {
              requestId: this.loadRuleSetGridRequestId
            }
          }
          postMessage(message)
        } else {
          loadRuleSetGrid({ ruleBaseType: 2, chipId: this.currentTreeData.value })
            .then(({ data }) => {
              this.tableData = data
            })
            .finally(() => {
              this.isLoading = false
            })
        }
      } else {
        this.tableData = []
      }
    },
    handleClick(row) {
      this.showRuleSetDetail = true
      if (defaultSettings.isWPF || defaultSettings.isCEF) {
        this.initParameterConfigurationRequestId = generateUUID()
        let message = {
          RequestUrl: process.env.VUE_APP_URL + '/ruleSet/initParameterConfiguration',
          RequestMethod: 'POST',
          Headers: {
            contentType: 'application/json'
          },
          QueryParameter: {},
          RequestBody: { ruleSetId: row.ruleSetId },
          WebInfo: {
            requestId: this.initParameterConfigurationRequestId
          }
        }
        postMessage(message)
      } else {
        initParameterConfiguration({ ruleSetId: row.ruleSetId }).then((res) => {
          this.$nextTick(() => {
            this.$refs.ruleSetDetail.is('view', res.data)
          })
        })
      }
    },
    handleClose() {
      this.showRuleSetDetail = false
    }
  }
}
</script>

<style lang="less" scoped>
.containerContent {
  height: calc(100% - 20px);
  border: 1px solid #ebeef5;
  .filter-tree {
    height: calc(100% - 42px);
    overflow-y: auto;
    margin-top: 10px;
  }
  .el-aside {
    border-right: 1px solid #ebeef5;
    padding: 20px;
  }
  .el-main {
    // padding: 0 20px;
    .myTableWrap {
      height: 100%;
      padding-bottom: 0;
      .myFormTable {
        padding-bottom: 0;
        /deep/.table-wrap {
          padding-bottom: 0;
        }
      }
    }
  }
}
</style>
